<template>
	<div :class="!isFull?'content':'contents'">
		<div :class="['echarts', !isColumnar?'vertical_echarts':'landscape_echarts']">
			<div :class="['title',!isColumnar?'vertical_title':'landscape_title']">
				<h5>柱状图</h5>
				<span :class="['iconfont', !isColumnar?'icon-hengping':'icon-shuping' ]" @click='columnar()'></span>
			</div>
			<div id="main" :class="!isColumnar?'vertical':'landscape'"></div>
		</div>
	</div>
</template>

<script>
	import echarts from 'echarts'
	export default {
		data() {
			return {
				myChart: null, // 图表需要字段
				isFull: false,
				isColumnar: false,
				option: null
			}
		},
		methods: {
			echarts() {
				// 基于准备好的dom，初始化echarts实例
				this.myChart = echarts.init(document.getElementById('main'));

				// 指定图表的配置项和数据
				this.option = {
					dataZoom: [{
						type: 'inside'
					}],
					grid: {
						x: 30,
						y: 40,
						x2: 10,
						y2: 30,
						// borderWidth: 60
					},
					xAxis: {
						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "衬衫", "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋",
							"袜子", "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"
						]
					},
					yAxis: {

					},
					series: [{
						name: '销量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20, 5, 5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20]
					}]
				};

				// 使用刚指定的配置项和数据显示图表。
				this.myChart.setOption(this.option);
			},
			resize() {
				this.myChart.resize() // 窗口大小发生变化的时候重置
			},
			columnar() {
				this.isColumnar = !this.isColumnar;
				this.isFull = !this.isFull;
				this.$emit('rotate', this.isColumnar);
			}

		},
		destroyed() {
			// 移除监听，echarts自适应
			window.removeEventListener('resize', this.resize)
		},
		mounted() {
			// echarts图表自适应
			window.addEventListener('resize', this.resize); // 添加监听
			this.echarts();
		},
		watch: {
			isColumnar: {
				handler() {
					//监听当屏幕发生转变时，重新渲染echarts
					if (this.myChart) {
						this.$nextTick(() => this.resize())
						this.myChart.setOption(this.option, true);
					}
				}
			},
		}
	}
</script>

<style scoped="scoped">
	@import url("../assets/iconfont.css");

	* {
		margin: 0;
		padding: 0;
	}

	.contents {
		width: 100%;
		height: 100vh;
		background: #fff;
	}

	.content {
		width: 100%;
		height: 100vh;
		background: #ededed;
	}

	.echarts {
		position: relative;
	}

	.landscape_echarts {
		transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		-o-transform: rotate(90deg);
	}

	.vertical_echarts {
		width: 100%;
		background-color: #fff;
	}

	.landscape {
		width: 100vh;
		height: 100vw;
		font-size: .4rem;
	}

	.vertical {
		width: 100%;
		height: 5rem;
		font-size: .4rem;
	}

	.title {
		display: flex;
		align-items: center;
		/* transform: translateY(.5rem); */
		position: absolute;
		top: 0;
		justify-content: space-between;
		z-index: 999;
	}

	.landscape_title {
		width: 100vh;
		height: 1rem;
	}

	.vertical_title {
		width: 100%;
		height: 1rem;
	}

	.title h5 {
		text-indent: .3rem;
		font-size: .4rem;
	}

	.title span {
		display: block;
		width: .4rem;
		height: .4rem;
		font-size: .4rem;
		margin-right: .4rem;
	}
</style>
